<template >
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/menu/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/menu/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="box-card">
            <!-- 提示 -->
            <el-alert title="添加商品信息" center type="info" show-icon>
            </el-alert>
            <!-- 步骤 -->
            <el-steps :active="active" align-center finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- 布局 -->

            <!-- 表单 -->
            <el-form :model="form" :rules="rules" ref='form'>
                <el-tabs tab-position="left" v-model="activeName" style="height: 800px;" @tab-click="aa"
                    :before-leave="beforeleave">
                    <el-tab-pane label="基本信息" name="0">


                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="form.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model="form.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model="form.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model="form.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="goods_cat">
                            <div class="block">
                                <el-cascader expand-trigger="hover" :options="fllist" :props="cateProps"
                                    v-model="form.goods_cat" @change="handleChange">
                                </el-cascader>

                            </div>
                        </el-form-item>

                    </el-tab-pane>
                    <!-- 商品参数 -->
                    <el-tab-pane label="商品参数" name="many">

                        <div class="box" v-for="item in formlist" :key="item.attr_id">
                            <h3 style="margin:10px">{{item.attr_name}}</h3>
                            <el-checkbox-group v-model="item.attr_vals" size="small">
                                <el-checkbox :label="it" v-for="it,index in item.attr_vals" :key="index" border>
                                </el-checkbox>

                            </el-checkbox-group>
                        </div>
                    </el-tab-pane>
                    <!-- 商品属性 -->
                    <el-tab-pane label="商品属性" name="only">
                        <el-form-item v-for="item in formlist1" :key="item.attr_id">
                            <h3 style="margin:10px">{{item.attr_name}}</h3>
                            <el-input v-model="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <!--商品图片 -->
                    <el-tab-pane label="商品图片" name="3">
                        <el-upload class="upload-demo" 
                            action="http://heima.9yuecloud.com:9988/api/private/v1/upload"
                            :on-preview="handlePreview" 
                            :on-remove="handleRemove" 
                            :on-success="handlesuccess"
                            :headers="headers"
                            :file-list="fileList" 
                            list-type="picture"
                            name="file">
                            <el-button size="small" type="primary">点击上传</el-button>

                        </el-upload>
                    </el-tab-pane>
                    <!-- 商品内容 -->
                    <el-tab-pane label="商品内容" name="4">

                        <VueEditor v-model="form.goods_introduce" />
                        <el-button type='primary' @click="add">添加内容</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>

        </el-card>
    </div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
    components: {
        VueEditor,
    },
    data() {
        return {
            active: 1,
            selectedCateKeys: [],
            activeName: '0',
            fllist: [],
            formlist: [],
            formlist1: [],
            cateProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
            },
            form: {
                goods_name: '',
                goods_price: 0,
                goods_weight: 0,
                goods_number: 0,
                goods_cat: [],
                goods_introduce: '',
                pics: [],
                attrs: [],

            },
            queryInfo: {
                pagesize: 5,
                pagenum: 1
            },
            rules: {
                goods_name: [
                    { required: true, message: '商品名称不能为空', trigger: 'blur' },
                ],
                goods_price: [
                    { required: true, message: '商品价格不能为空', trigger: 'blur' },
                ],
                goods_weight: [
                    { required: true, message: '商品重量不能为空', trigger: 'blur' },
                ],
                goods_number: [
                    { required: true, message: '商品数量不能为空', trigger: 'blur' },
                ],
                goods_cat: [
                    { required: true, message: '商品分类不能为空', trigger: 'blur' },
                ]
            },

            fileList: [],
            headers:{Authorization:localStorage.getItem('token')}

        }
    },
    mounted() {
        this.getfllist()
        
    },
    methods: {
        beforeleave(activeName, oldactiveName) {
            if (oldactiveName === '0' && this.form.goods_cat.length !== 3) {
                this.$message.error('请填写商品分类')
                return false
            } else {

            }
        },
        async getfllist() {
            var res = await this.axios({
                url: '/v1/categories',
            })
            console.log(res);
            this.fllist = res.data.data
            console.log(this.fllist);
        },
        handleChange() {
            console.log(this.selectedCateKeys)
        },
        async aa(tab) {
            if (this.form.goods_cat.length !== 3) {
                return
            } else {
                let num = Number(tab.index) + 1
                this.active = num
                // console.log(this.activeName,'re');
                let id = this.form.goods_cat[2]
                let sel = this.activeName
                var res = await this.axios({
                    url: `/v1/categories/${id}/attributes`,
                    params: {
                        sel: sel,
                    }
                })
                // console.log(res, 'addres');
                if (this.activeName == 'many') {
                    res.data.data.forEach(item => {
                        item.attr_vals = item.attr_vals.split(' ')
                        if (item.attr_vals[0] == '') {
                            item.attr_vals = []
                        }
                    })
                    this.formlist = res.data.data
                    console.log(this.formlist, 'formlist');
                } else if (this.activeName == 'only') {
                    res.data.data.forEach(item => {

                        if (item.attr_vals[0] == '') {
                            item.attr_vals = []
                        }
                    })
                    this.formlist1 = res.data.data
                }
            }

        },
        //删除时出发的钩子  file 删除的图片内容， filelist 图片列表的内容
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        // 点击被上传的图片的内容
        handlePreview(file) {
            console.log(file);
        },
        // 上传成功后做的
        handlesuccess(val) {
            // console.log(val.data.tmp_path, 'file')
            this.form.pics.push({pic:val.data.tmp_path})
            // console.log(this.fileList,'filelist');
        },
        add() {
            // console.log(this.form ,'form');
            this.$refs.form.validate(async (valid) => {
                if (!valid) {
                    return this.$message.error('校验失败,请检查被校验的数据')
                } else {
                    var res = await this.axios({
                        url: "/v1/goods",
                        method: 'POST',
                        data: {
                            goods_name: this.form.goods_name,
                            goods_price: Number(this.form.goods_price),
                            goods_weight: Number(this.form.goods_weight),
                            goods_number: Number(this.form.goods_number),
                            goods_cat: this.form.goods_cat.join(','),
                            goods_introduce: this.form.goods_introduce,
                            // pics: this.form.pics,
                            pics:[],
                            
                            attrs: this.form.attrs,
                        }
                    })
                    console.log(this.form, 'form');
                    if (res.data.meta.status == 201) {
                        this.$message.success('添加成功')
                        this.$router.push('/goods')
                    } else {
                        this.$message.error(res.data.meta.msg)
                    }
                }
            })
        }
    },

}
</script>
<style >
.box-card {
    width: 100%;
    margin-top: 15px;
}

.box {
    width: 100%;
    margin-bottom: 80px;

    font-size: 18px;
}

.el-checkbox {
    margin: 5px;
}
</style>